<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：react、vue中的key有什么作用。key的内部原理
        1.虚拟DOM中的key作用：key是虚拟DOM中对象的标识，当数据发生变化时，
        vue会根据新数据生成新的虚拟DOM，随后vue进行新虚拟DOM与旧虚拟DOM的差异比较
        2.对比规则：
            a.旧DOM中找到与新虚拟DOM相同的key,若虚拟DOM中内容没变，直接使用之前的DOM
            b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
            c.旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM
        3.index作为key可能会引发的问题
            a.若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM
              效率低
            b.若结构中还包含输入类的DOM：会产生错误DOM更新
        4.开发中最好使用每一条数据的唯一标识作为key,
        5.如果不存在对数据的逆序操作，仅用于渲染列表，使用index作为key是没问题的

    -->
    <div id="demo">
        <button @click="add">添加</button>
        <ul>
            <li v-for="(p,index) in persons">
                {{p.id}} {{p.name}} {{p.age}}<input type="text">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                name:"test",
                persons:[
                    {id:"001",name:"A",age:"21"},
                    {id:"002",name:"B",age:"22"},
                    {id:"003",name:"C",age:"23"}
                ],
                
            },
            methods:{
                    add(){
                        const p = {id:"004",name:"D",age:"24"}
                        // this.persons.unshift(p) 首插入--强行这样添加数据，就会导致数据乱掉，不写默认是index做key
                        this.persons.push(p)//顺着ID下来就是正常的
                    }
                }
        })
    </script>
</body>
</html>